<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--头部加入js-->
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{messsage}}
			<!--MVVM模式本身是实现了双向绑定的，
			在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
			修改message的数据时,会相应修改{{message}}里的数据，这里的message就已经带有value值了-->
			<input type="text" v-model="message" id="inpmes"/>
		</div>
		<script type="text/javascript">
		//这是我们的Model
		var exampleData = {
			message:'Hello World!'
		}
		
		//创建一个Vue实例或"ViewModel"
		//它连接View与Model
		//也就是MVVM中的VM
		new Vue({
			el:'#app',
			data:exampleData
		})
		alert(document.getElementById("inpmes").value)
		</script>
		<!--v-if指令是条件渲染指令，他根据表达式的真假来删除和插入元素
			v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
			false的属性不会被渲染在html页面上
		-->
		<div id="app1">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
		</div>
		<script type="text/javascript">
		new Vue({
			el:'#app1',
			data:{
				yes:true,
				no:false,
				age:'28',
				name:'jace'
			}
		})
		</script>
		
		<!--v-show指令与if不同的是
			它的元素始终会被渲染到页面上，false的css属性为display:none
		-->
		<div id="app2">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
        <script type="text/javascript">
	
		new Vue({
			el:'#app2',
			data:{
				yes:true,
				no:false,
				age:28,
				name:'keepfool'
			}
		})
		</script>
        <!--v-on指令用于给监听DOM事件，
        它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：-->
        	<div id="app3">
        		<p><input type="text" v-model="message" value="" /></p>
        		<p>
        			<!--click事件直接绑定一个方法-->
        			<button v-on:click="greet">Greet</button>
        		</p>
        		<p>
        			<!--click事件使用内联语句-->
        			<button v-on:click="say('Hi')">Hi</button>
        		</p>
        	</div>
       <script type="text/javascript">
		var vm = new Vue({
			el:'#app3',
			data:{
				message:'Hello,Vue.js'
			},
			methods:{
				greet:function(){
					alert(this.message)
				},
				say:function(msg){
					alert(msg);
				}
			}
		})
		</script>
        	<!--无论用户输入多少次，这个name都会被自动更新。并且，如果name的值被改变了，其他有映射name的地方的值也会被修改。
				这种input框和映射的同步修改的原因，就是利用v-model这个指令，让数据通过底层的数据流进行绑定后直接修改。这就是数据的双向绑定的概念。
				为了证明这个概念，我们可以利用$data打印出数据的映射来看看。-->
        	<div id="vueInstance">
    		  输入您的姓名: <input type="text" v-model="name">
     		 <p>{{ $data | json }}</p> 
      		<p>{{ name }}</p>          
			</div>
			
			<div id="myButton">
				输入您的姓名：<input type="text" v-model="name" />
				<button v-on:click = "say">欢迎点击</button>
				<button @click="saya('Hi')">欢迎点击2</button>
			</div>
			<script type="text/javascript">
				var V = new Vue({
         			el : '#vueInstance',
          			data : {
                  	name : '_Appian'
           			 }
     			 });
				var vm1 = new Vue({
					el:myButton,
					data:{
						name:""
					},
					methods:{
						say:function(){
							alert(this.name);
						},
						saya:function(mes){
							alert(mes+this.name);
						}
					}
				});
			</script>
	</body>
</html>
